<template>
	<view class="pad20">
		<view class="add-view pad20 border-rad20">
			<view class="top-text">
				请绑定持卡人本人的银行卡
			</view>
			<view class="cu-form-group margin-top">
				<view class="title font-input">持卡人</view>
				<input class="font-input" placeholder="两字短标题" name="input" :value="uName"></input>
			</view>
			<view class="cu-form-group">
				<view class="title font-input">卡号</view>
				<input class="font-input" type="number" placeholder="请输入银行卡号" name="input"
				v-model="cardNumber"></input>
			</view>
			
			
			<view class="">
				<button class="sub-but" :class="cardNumber>0?'':'ban-but'" type="primary"
				@tap="add">确定</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				uName:"商家姓名",
				cardNumber:'',
			}
		},
		methods: {
			add(){
				if(this.cardNumber > 0){
					uni.showToast({
						title:  "银行卡添加成功!", 
					})
					this.cardNumber = '';
				}
			}
		}
	}
</script>

<style>
.add-view{
	background-color: #FFFFFF;
}
.top-text{
	font-size:24upx;
	font-weight:500;
	color:rgba(124,124,124,1);
	line-height:34upx;
}
.cu-form-group .title {
	min-width: calc(4em + 15px);
	
}
.font-input{
	font-size:28upx;
	font-weight:500;
	color:rgba(60,60,60,1);
}
.cu-form-group{
	padding: 1upx 0;
}

.sub-but{
		margin-top: 80upx;
		width:400upx;
		height:80upx;
		border-radius:40upx;
	}
	.allow-but{
		
	}
	.ban-but{
		background:rgba(180,180,180,1);
	}
</style>
